<template>
  <osc-navpage
    class="personal-root"
    title="采购单管理"
    height="100"
    titleColor="#000"
    backgroundColor="#eff3f2"
    leftItemSrc=""
    @naviBarLeftItemClick="naviBarLeftItemClick">

    <div class="content">

      <list class="scroller">
        <refresh class="refresh" @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">
          <text class="indicator">下拉刷新……</text>
        </refresh>

        <cell class="cell" v-for="purchaseInfo in lists">
          <div class="panel" @click="onclick(purchaseInfo)">
            <div class="content-head">
              <div class="content-head-supply">
                <text class="text">供应商:</text>
                <text class="text">{{purchaseInfo.supply}}</text>
              </div>
              <div class="content-head-date">
                <text class="text">采购日期:</text>
                <text class="text">{{purchaseInfo.date}}</text>
              </div>
            </div>
            <div class="content-bottom">
              <text class="text">No:</text>
              <text class="text">{{purchaseInfo.no}}</text>

              <div v-if="purchaseInfo.status == '0'">
                <text class="type-text">采购单状态: 待确认</text>
              </div>
              <div v-if="purchaseInfo.status == '1'">
                <text class="type-text">采购单状态: 已发货</text>
              </div>
            </div>
          </div>
        
        </cell>
      
      </list>      
    </div>

    <div class="img-add" @click="addPurchaseInfo">
        <image class="img-top" src="https://olwr1lamu.qnssl.com/%E6%B7%BB%E5%8A%A0.png"></image>
    </div>

  </osc-navpage> 
</template>

<script>
import route from 'router/page'
import mixins from 'mixins'

const storage = weex.requireModule('storage')
const modal = weex.requireModule('modal')
const stream = weex.requireModule('stream')

export default {
  data () {
    return {
      power: '',
      refreshing: false,
      lists: []
    }
  },
  mixins: [mixins],
  methods: {
    onrefresh (event) {
      modal.toast({ message: '刷新中', duration: 1 })
      stream.fetch({
        method: 'GET',
        type: 'json',
        url: this.imgUrl.collect.computerUrl + 'getPurchaseInfoList'
      }, callback => {
          // modal.toast({ message: '11111', duration: 1 })
          this.lists = callback.data
          // modal.toast({ message: callback.data, duration: 1 })
      })
      this.refreshing = true
      setTimeout(() => {
        this.refreshing = false
      }, 200)
    },
    onclick (purchaseInfo) {
      // modal.toast({ message: '刷新中', duration: 1 })
      // 跳转到添加页面
      storage.setItem('id4detail', purchaseInfo.id, event => {
          console.log('set success')
      })
      this.router.push({
         page: this.routerPage.purchaseDetail
         // ,query: item.no
      })
    }, 
    addPurchaseInfo() {
      this.router.push({
         page: this.routerPage.addPurchaseDetail
      })
    }
  }, 
  created () {
    
    storage.getItem('power', event => {
      this.power = event.data
    })

    stream.fetch({
      method: 'GET',
      type: 'json',
      url: this.imgUrl.collect.computerUrl + 'getPurchaseInfoList'
    }, callback => {
        // modal.toast({ message: '11111', duration: 1 })
        this.lists = callback.data
        // modal.toast({ message: callback.data, duration: 1 })
    })
  }
}
</script>

<style>
  .type-text {
    margin-top: 20px;
    margin-left: 100px;
    font-size: 25px;
    opacity:0.5;
  }
  .indicator {
    margin-left: 300px;
  }
  .content {
    position: absolute;
    height: 10000px;
  }
  .img-add {
    position: absolute;
    width: 130px;
    height: 130px;
    margin-top: 900px;
    margin-left: 600px;
  }
  .img-top {
    opacity:0.7;
    width: 130px;
    height: 130px;
  }
  .indicator {
    color: #888888;
    font-size: 42px;
    text-align: center;
  }
  .panel {
    width: 750px;
    height: 200px;
    flex-direction: column;
    border-width: 2px;
    border-style: solid;
    border-color: #DDDDDD;
    background-color: #F5F5F5;
  }
  .content-head-supply {
    flex-direction: row;
  }
  .content-head-date {
    flex-direction: row;
    margin-left: 100px;
  }
  .content-head {
    margin-top: 25px;
    flex-direction: row;
    justify-content: flex-start;
  }
  .content-bottom {
    margin-top: 50px;
    flex-direction: row;
    justify-content: flex-start;
  }
  .text {
    margin-left: 10px;
    flex-direction: row;
    font-size: 40px;
    text-align: center;
    color: #41B883;
  }
</style>